<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
    <script src="../js/jquery-1.12.2.min.js" type="text/javascript"></script>
</head>
<body>
<div id="content">
    <div class="layui-form  serchDiv">
        <div class="layui-form-item">
            <label class="layui-form-label">名字:</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="name"
                       placeholder="请输姓名" autocomplete="on" class="layui-input">
            </div>

            <div class="layui-inline">
                <label class="layui-form-label">开始日期</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test1" placeholder="yyyy-MM-dd">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">结束日期</label>
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="test2" placeholder="yyyy-MM-dd">
                </div>
            </div>
            <button class="layui-btn" data-type="reload">查询</button>
        </div>
    </div>
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
</body>
<script>
    layui.use(['table', 'laydate', "laypage", "layer", 'carousel', 'upload', 'element', 'slider'], function () {
        //初始化table组件对象
        var table = layui.table
            , laypage = layui.laypage//分页的组件
            , layer = layui.layer//弹框
            , laydate = layui.laydate//日期组件
            , element = layui.element;//元素的操作

        //常规用法 渲染那个时间框的！！！
        laydate.render({
            elem: '#test1'
        });
        //常规用法
        laydate.render({
            elem: '#test2'
        });
        //渲染table
        table.render({
            //找到table  id叫test的组件
            elem: '#test'
            , id: "transferTable"
            , url: 'hospital/selectSign.do'
            , totalRow: true
            //这个很关键，就是解析 json数据库中数据的 一定要注意键值
            , cols: [[
                {field: 'name', title: '姓名', edit: 'text'}
                ,{field: 'idNumber', title: '身份证号', edit: 'text'}
                ,{field: 'temperature', title: '体温', unresize: true, sort: true}
                ,{field: 'heartRate', title: '心率', unresize: true, sort: true}
                , {field: 'bloodPressure', title: '血压', sort: true}
                , {field: 'bloodSugar', title: '血糖'}
                , {field: 'inputTime', title: '录入时间'}

            ]]
            , page: true //分页开启
        });
        //搜索框有效果的情况
        var active = {
            reload: function () {
                //执行重载
                table.reload('transferTable', {
                    page: {
                        curr: 1   //重新从第 1 页开始
                    }
                    , where: {
                        //额外需要提交的参数
                        beginTime: $("#test1").val(),
                        endTime: $("#test2").val(),
                    }
                });
            }
        };

        $('.serchDiv .layui-btn').on('click', function () {
            var type = $(this).data('type');
            console.log(type)
            active[type] ? active[type].call(this) : '';
        });
    });
</script>
</html>